<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0042)http://jscs.cloudapp.net/ControlsSample/CM -->
<HTML xmlns="http://www.w3.org/1999/xhtml">
	<HEAD>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	    <TITLE></TITLE>
	    <LINK href="../contextmenu.css" rel="stylesheet" type="text/css" />
	    <link  href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
	    <script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	    <SCRIPT src="../jquery.contextmenu.js" type="text/javascript"></SCRIPT> 
	   
	   <!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	   
	    <STYLE type="text/css">
	        .target
	        {
	            position:absolute;
	            left:200px;
	            top:80px;
	            border:solid 1px #ffccee;   
	            padding:5px;
	            background-color:Blue;
	            color:#fff;
	         }
	         
	         .target2
	        {
	            position:absolute;
	            left:200px;
	            top:160px;
	            border:solid 1px #ffccee;   
	            padding:5px;
	            background-color:Blue;
	            color:#fff;
	         }
	    </STYLE>
	    
	    <SCRIPT type="text/javascript">
	    	 $(function(){
	            var option1 = { width: 150, items: [
                            { text: "第一项", icon: "../images/ico1.gif", alias: "1-1", action: menuAction,disable: true },
                            { text: "第二项", icon: "../images/ico2.gif", alias: "1-2", action: menuAction },
                            { text: "第三项", icon: "../images/ico3.gif", alias: "1-3", action: menuAction },
                            { type: "splitLine" },
                            { text: "第四项", icon: "../images/ico5.gif", alias: "1-5", action: menuAction }
                            ]
               };

	            var option2 = { width: 150, items: [
	                                               { text: "第一项", icon: "../images/ico1.gif", alias: "1-1", action: menuAction,disable: true },
	                                               { text: "第二项", icon: "../images/ico2.gif", alias: "1-2", action: menuAction },
	                                               { text: "第三项", icon: "../images/ico3.gif", alias: "1-3", action: menuAction },
	                                               { type: "splitLine" },
	                                               { text: "第四项", icon: "../images/ico5.gif", alias: "1-5", action: menuAction }
	                                               ]
	                                  };
               
              function menuAction() {
                  alert("alias: " + this.data.alias + ";text: " + this.data.text );
              }
	            
	          $("#target1").contextmenu(option1);
	          $("#target2").contextmenu(option2);
	          $("#target1").bind("contextmenu",function(e){$(this).contextmenu().show(e);});
	          $("#target2").bind("mouseover",function(e){$(this).contextmenu().show(e);});
	            
	        });

	    </SCRIPT>
	</HEAD>
	<BODY><br/><br/><br/>
	        <DIV id="target1" class="target">绑定右键事件触发</DIV><br/>
	        
	        <DIV id="target2" class="target2">绑定鼠标悬浮事件触发</DIV>
	        
	</BODY>
</HTML>